<template>
  <div class="cont">
    <van-tabs v-model="active" color="#FF9700" @change="handleTab">
      <van-tab title="实习"></van-tab>
      <van-tab title="兼职"></van-tab>
    </van-tabs>
    <van-grid :border="false" :column-num="4">
      <van-grid-item
        text="市场推广"
        v-for="item in catelist"
        :key="item._id"
        v-show="item.catetype == active + 1"
        @click="handleCate(item._id)"
      >
        <van-image :src="require('@/' + item.icon)" width="50" height="50" />
        <span class="m-t-15">{{ item.name }}</span>
      </van-grid-item>
    </van-grid>
    <div class="p-30 m-t-15 flex justify-around bg-fff" @click="isShow=true">
      <span>所有岗位</span>
      <span>默认排序</span>
      <span>筛选</span>
    </div>
    <JobMenu v-if="isShow" @on-close="isShow=false"/>
    <van-empty description="暂无相关岗位" v-if="!joblist.length"></van-empty>
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="joblist.length?'没有更多了':''"
      @load="onLoad"
    >
      <job-item
        v-for="(item, index) in joblist"
        :key="index"
        :job-data="item"
      ></job-item>
    </van-list>
    
  </div>
</template>

<script>
import request from "@/utils/request";
import { jobGet } from "../api/job.js";
import JobMenu from '../components/JobMenu.vue'
export default {
  components: {
    JobMenu,
  },
  data() {
    return {
      active: 0,
      catelist: [],
      joblist: [], //岗位列表
      loading: false,
      finished: false,
      page:1,
      condition:{ //集中存放条件对象
        cfytype:1,
        _page:1,
        // cfyid:''
      },
      isShow:false   //控制遮罩
    };
  },
  computed: {
    other() { //其他附带条件
      return this.$store.state.job.condition 
    }
  },
  watch:{
    other(){
      console.log('检测到了筛选条件的变化');
      this.reloadData()
    }
  },
  created() {
    //加载分类
    request.get("/catelog").then((res) => {
      console.log(res);
      this.catelist = res.data.data;
    });
  },
  methods: {
    handleTab(idx) { //菜单切换
      this.condition.cfytype = idx+1 
      delete this.condition.cfyid   //删除子分类id
      this.reloadData()
    },
    handleCate(cfyid){ //分类宫格
      this.condition.cfyid = cfyid
      this.reloadData()
    },
    onLoad(){ //初始化、触底的时候会触发
      console.log('onLoad执行了');
      // 加载实习岗位
      this.fetchData()
    },
    reloadData(){ //条件发生变化时重新加载数据
      this.condition._page = 1
      this.joblist = []
      this.finished = false
      this.fetchData()
    },
    fetchData(){ //数据加载
      let {condition,other} = this
      jobGet({...condition,...other}).then((res) => {
        console.log(res);
        let {data} = res.data
        if(data.length){
          this.joblist = [
            ...this.joblist, //原数据
            ...data  //新数据
          ];
          this.condition._page++
        }else{
          this.finished = true  //分页加载动作结束
        }
        this.loading = false
      });
    }
  },
};
</script>

<style lang="less" scoped>
.cont{
  padding-bottom: 6rem;
  background: #f7f7f7;
}
</style>
